﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/ga.js" async="" type="text/javascript"></script>
    <script type="text/javascript">        var NREUMQ = NREUMQ || []; NREUMQ.push(["mark", "firstbyte", new Date().getTime()]);</script>
    <title>Indicadores</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta name="description" content="Default Description">
    <meta name="keywords" content="Magento, Varien, E-commerce">
    <meta name="robots" content="INDEX,FOLLOW">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link href="css/css_003.css" rel="stylesheet" type="text/css">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/css_002.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://livedemo00.template-help.com/magento_42968/js/blank.html';
    var BLANK_IMG = 'http://livedemo00.template-help.com/magento_42968/js/spacer.gif';
//]]>
</script>
<![endif]-->
    <!--[if lt IE 9]>
<div style=' clear: both; text-align:center; position: relative;'>
 <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->
    <!--[if lt IE 9]>
	<style>
	body {
		min-width: 960px !important;
	}
	</style>
<![endif]-->
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/responsive.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/camera.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/widgets.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/cloud-zoom.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.knob.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/cookies.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://livedemo00.template-help.com/magento_42968/skin/frontend/default/theme451/css/styles-ie.css" media="all" />
<![endif]-->
    <!--[if lt IE 7]>
<script type="text/javascript" src="http://livedemo00.template-help.com/magento_42968/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://livedemo00.template-help.com/magento_42968/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
    <script type="text/javascript">
        //<![CDATA[
        Mage.Cookies.path = '/magento_42968';
        Mage.Cookies.domain = '.livedemo00.template-help.com';
        //]]>
    </script>
</head>
<body class=" cms-index-index cms-home">
    <div class="wrapper en-lang-class">
        <noscript>
            <div class="global-site-notice noscript">
                <div class="notice-inner">
                    <p>
                        <strong>JavaScript seems to be disabled in your browser.</strong><br />
                        You must have JavaScript enabled in your browser to utilize the functionality of
                        this website.
                    </p>
                </div>
            </div>
        </noscript>
        <div class="page">
            <div class="header-container">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="header">
                                <h1 class="logo">
                                    <strong>Sigci</strong><a href="#" title="Gadget online" class="logo"><img src="images/logo.png"
                                        alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Min Tic</strong><a href="#" title="Gadget online" class="logo"><img src="images/mintic.png"
                                        alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Prosperidad para Todos</strong><a href="#" title="Gadget online" class="logo"><img
                                        src="images/prosperidad.png" alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Vive Digital</strong><a href="#" title="Gadget online" class="logo"><img
                                        src="images/vivedigital.png" alt="Gadget online"></a></h1>
                                <div class="clear">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="nav-container" style="margin-top: 10px;">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div id="menu-icon">
                                Categorías</div>
                            <ul id="nav" class="sf-menu sf-js-enabled">
                                <li class="level0 nav-1 first level-top"><a href="index.html" class="level-top"><span>
                                    HOME</span></a> </li>
                                <li class="level0 nav-1 first level-top parent"><a href="#" class="level-top"><span>
                                    ICBF</span></a>
                                    <ul style="display: none;" class="level0">
                                        <li class="level1 nav-1-1 first"><a href="icbf.html"><span>Puntos de atención</span></a></li>
                                        <li class="level1 nav-1-2"><a href="icbf-bienestarina.html"><span>Puntos de distribución
                                            de bienestarina</span></a></li>
                                    </ul>
                                </li>
                                <li class="level0 nav-2 level-top parent"><a href="#" class="level-top"><span>Educación</span></a>
                                    <ul style="display: none;" class="level0">
                                        <li class="level1 nav-2-1 first"><a href="instituciones.html"><span>Instituciones de
                                            educación para el trabajo y el desarrollo humano</span></a></li>
                                        <li class="level1 nav-2-1 first"><a href="ins-educativas.html"><span>Establecimientos
                                            educativos</span></a></li>
                                    </ul>
                                </li>
                                <li class="level0 nav-3 level-top parent"><a href="#" class="level-top"><span>Salud</span></a><ul
                                    style="display: none;" class="level0">
                                    <li class="level1 nav-3-1 first"><a href="indicadores.html"><span>Indicador de salubridad
                                        del agua</span></a></li>
                                </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="main-container col1-layout">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="main">
                                <div class="col-main">
                                    <div class="padding-s">
                                        <div class="std">
                                            <div class="clear">
                                            </div>
                                        </div>
                                        <div>
                                            <div class="breadcrumbs">
                                                <ul>
                                                    <li class="home"><a href="#" title="Go to Home Page">Inicio</a> <span>&gt;</span>
                                                    </li>
                                                    <li class="category3"><strong>Indicadores</strong> </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div id="loaderGif">
                                            <img src="images/ajax-loader.gif" alt="cargando" style="top: 65%; left: 47%; z-index: 1000;
                                                position: fixed;" />
                                        </div>
                                        <div class="page-title category-title">
                                            <h1>
                                                Promedio por regiones de la calidad del agua potable para consumo humano
                                            </h1>
                                        </div>
                                        <!-- <h2 class="subtitle"></h2> -->
                                        <ul class="products-grid row">
                                            <li class="item first span4"><a href="#" title="Caribe" class="product-image">
                                                <input type="text" value="0" class="dialCaribe" readonly data-fgcolor="#81378e" />
                                            </a>
                                                <div style="height: 217px;" class="product-shop">
                                                    <h3 class="product-name">
                                                        <a href="#" title="Indicadores">Conozca los indicadores de calidad de agua potable para
                                                            el consumo humano de la región Caribe</a></h3>
                                                    <div class="price-box">
                                                        <span id="product-price-4" class="regular-price"><span class="price" id="riesgoCaribe">
                                                        </span></span>
                                                    </div>
                                                    <div class="actions">
                                                        <button type="button" title="Ver Indicadores" class="button btn-cart" onclick="verIndicador('caribe');">
                                                            <span><span>Ver Indicadores</span></span></button>
                                                    </div>
                                                </div>
                                                <div class="label-product">
                                                    <span class="new">Región Caribe</span>
                                                </div>
                                            </li>
                                            <li class="item first span4"><a href="#" title="Andina" class="product-image">
                                                <input type="text" value="0" class="dialAndina" readonly data-fgcolor="#81378e" />
                                            </a>
                                                <div style="height: 217px;" class="product-shop">
                                                    <h3 class="product-name">
                                                        <a href="#" title="Indicadores">Conozca los indicadores de calidad de agua potable para
                                                            el consumo humano de la región Andina</a></h3>
                                                    <div class="price-box">
                                                        <span id="product-price-4" class="regular-price"><span class="price" id="riesgoAndina">
                                                        </span></span>
                                                    </div>
                                                    <div class="actions">
                                                        <button type="button" title="Ver Indicadores" class="button btn-cart" onclick="verIndicador('andina');">
                                                            <span><span>Ver Indicadores</span></span></button>
                                                        <!-- <ul class="add-to-links">
                                                            <li><a data-original-title="" href="#" class="link-wishlist">Add to Wishlist</a></li>
                                                            <li><span class="separator">|</span> <a data-original-title="" href="#" class="link-compare">Add to Compare</a></li>
                                                        </ul>-->
                                                    </div>
                                                </div>
                                                <div class="label-product">
                                                    <span class="new">Región Andina</span>
                                                </div>
                                            </li>
                                            <li class="item first span4"><a href="#" title="Pacífico" class="product-image">
                                                <input type="text" value="0" class="dialPacifico" readonly data-fgcolor="#81378e" />
                                            </a>
                                                <div style="height: 217px;" class="product-shop">
                                                    <h3 class="product-name">
                                                        <a href="#" title="Indicadores">Conozca los indicadores de calidad de agua potable para
                                                            el consumo humano de la región Pacífico</a></h3>
                                                    <div class="price-box">
                                                        <span id="product-price-4" class="regular-price"><span class="price" id="riesgoPacifico">
                                                        </span></span>
                                                    </div>
                                                    <div class="actions">
                                                        <button type="button" title="Ver Indicadores" class="button btn-cart" onclick="verIndicador('pacifico');">
                                                            <span><span>Ver Indicadores</span></span></button>
                                                        <!-- <ul class="add-to-links">
                                                            <li><a data-original-title="" href="#" class="link-wishlist">Add to Wishlist</a></li>
                                                            <li><span class="separator">|</span> <a data-original-title="" href="#" class="link-compare">Add to Compare</a></li>
                                                        </ul>-->
                                                    </div>
                                                </div>
                                                <div class="label-product">
                                                    <span class="new">Región Pacífico</span>
                                                </div>
                                            </li>
                                        </ul>
                                        <ul class="products-grid row">
                                            <li class="item first span4"><a href="#" title="Amazonía" class="product-image">
                                                <input type="text" value="0" class="dialAmazonas" readonly data-fgcolor="#81378e" />
                                            </a>
                                                <div style="height: 217px;" class="product-shop">
                                                    <h3 class="product-name">
                                                        <a href="#" title="Indicadores">Conozca los indicadores de calidad de agua potable para
                                                            el consumo humano de la región Amazonía</a></h3>
                                                    <div class="price-box">
                                                        <span id="product-price-4" class="regular-price"><span class="price" id="riesgoAmazonia">
                                                        </span></span>
                                                    </div>
                                                    <div class="actions">
                                                        <button type="button" title="Ver Indicadores" class="button btn-cart" onclick="verIndicador('amazonia');">
                                                            <span><span>Ver Indicadores</span></span></button>
                                                        <!-- <ul class="add-to-links">
                                                            <li><a data-original-title="" href="#" class="link-wishlist">Add to Wishlist</a></li>
                                                            <li><span class="separator">|</span> <a data-original-title="" href="#" class="link-compare">Add to Compare</a></li>
                                                        </ul>-->
                                                    </div>
                                                </div>
                                                <div class="label-product">
                                                    <span class="new">Región Amazonía</span>
                                                </div>
                                            </li>
                                            <li class="item first span4"><a href="#" title="Orinoquía" class="product-image">
                                                <input type="text" value="0" class="dialOrinoquia" readonly data-fgcolor="#81378e" />
                                            </a>
                                                <div style="height: 217px;" class="product-shop">
                                                    <h3 class="product-name">
                                                        <a href="#" title="Indicadores">Conozca los indicadores de calidad de agua potable para
                                                            el consumo humano de la región Orinoquía</a></h3>
                                                    <div class="price-box">
                                                        <span id="product-price-4" class="regular-price"><span class="price" id="riesgoOrinoquia">
                                                        </span></span>
                                                    </div>
                                                    <div class="actions">
                                                        <button type="button" title="Ver Indicadores" class="button btn-cart" onclick="verIndicador('orinoquia');">
                                                            <span><span>Ver Indicadores</span></span></button>
                                                        <!-- <ul class="add-to-links">
                                                            <li><a data-original-title="" href="#" class="link-wishlist">Add to Wishlist</a></li>
                                                            <li><span class="separator">|</span> <a data-original-title="" href="#" class="link-compare">Add to Compare</a></li>
                                                        </ul>-->
                                                    </div>
                                                </div>
                                                <div class="label-product">
                                                    <span class="new">Región Orinoquía </span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-container-2">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="footer footer2">
                                <address>
                                    ©
                                    <script type="text/javascript">                                        var mdate = new Date(); document.write(mdate.getFullYear());</script>
                                    SIGCI. Todos los derechos reservados.
                                </address>
                                <!--{%FOOTER_LINK}-->
                                <div class="clear">
                                </div>
                                <!--<div class="paypal-logo">
                                    <a href="#" title="Additional Options" onclick="javascript:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','paypal','width=600,height=350,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
                                        <img src="images/bnr_nowAccepting_150x60.gif" alt="Additional Options" title="Additional Options"></a>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--LIVEDEMO_00 -->
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-7078796-5']);
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();</script>
    <script type="text/javascript">        if (!NREUMQ.f) { NREUMQ.f = function () { NREUMQ.push(["load", new Date().getTime()]); var e = document.createElement("script"); e.type = "text/javascript"; e.src = (("http:" === document.location.protocol) ? "http:" : "https:") + "//" + "d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js"; document.body.appendChild(e); if (NREUMQ.a) NREUMQ.a(); }; NREUMQ.a = window.onload; window.onload = NREUMQ.f; }; NREUMQ.push(["nrfj", "beacon-1.newrelic.com", "72d7dcce33", "1388850", "ZV1TZ0FTVkFVWkwKXlwXcFBHW1dcG1pVEB5bVlVWSx1RXFBcQA==", 0, 587, new Date().getTime(), "", "", "", "", ""]);</script>
    <script src="js/rum.js" type="text/javascript"></script>
    <script src="js/72d7dcce33.js" type="text/javascript"></script>
    <script>

        function verIndicador(region) {
            localStorage.setItem("region", region);
            window.location.href = "salubridad.html";
        }

        function calcularRiesgo(valor) {
            //Sin riesgo 0 - 5
            //Riesgo bajo 5.1 - 15
            //Riesgo medio 14.1 - 35
            //Riesgo alto 35.1 - 80
            //Inviable sanitariamente > 80

            if (valor <= 5) {
                return "Sin Riesgo";
            }
            else if (valor <= 15) {
                return "Riesgo Bajo";
            }
            else if (valor <= 35) {
                return "Riesgo Medio";
            }
            else if (valor <= 80) {
                return "Riesgo Alto";
            }
            else {
                return "Inviable Sanitariamente";
            }

        }

        function omitirAcentos(text) {
            var acentos = "ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç";
            var original = "AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc";
            for (var i = 0; i < acentos.length; i++) {
                if (text != null) {
                    text = text.replace(acentos.charAt(i), original.charAt(i));
                }
            }
            return text.toLowerCase();
        }

        $(document).ready(function () {

            $(".dialCaribe").knob();
            $(".dialAndina").knob();
            $(".dialPacifico").knob();
            $(".dialAmazonas").knob();
            $(".dialOrinoquia").knob();

            var regAndina = ['medellin', 'antioquia', 'tunja', 'boyaca', 'manizales', 'caldas', 'cundinamarca', 'bogota. d.c.', 'huila', 'neiva', 'norte de santander', 'cucuta', 'quindio', 'armenia', 'risaralda', 'pereira', 'santander', 'bucaramanga', 'tolima', 'ibague'];

            var regCaribe = ['atlantico', 'barranquilla', 'bolivar', 'cartagena', 'cesar', 'valledupar', 'cordoba', 'monteria', 'la guajira', 'riohacha', 'magdalena', 'santa marta', 'san andres'];

            var regPacifica = ['choco', 'quibdo', 'valle del cauca', 'cali', 'cauca', 'popayan', 'narino', 'pasto'];

            var regOrinoquia = ['meta', 'villavicencio', 'vichada', 'puerto carreno', 'casanare', 'yopal', 'arauca'];

            var regAmazonia = ['amazonas', 'leticia', 'caqueta', 'florencia', 'guainia', 'puerto inirida', 'guaviare', 'san jose', 'putumayo', 'mocoa', 'vaupes', 'mitu'];

            var sumAndina = 0, sumaCaribe = 0, sumaPacifica = 0, sumaOrinoquia = 0, sumaAmazonia = 0;
            var cantAndina = 0, cantCaribe = 0, cantPacifica = 0, cantOrinoquia = 0, cantAmazonia = 0, cant = 0;
            var totalAndina = 0, totalCaribe = 0, totalPacifica = 0, totalOrinoquia = 0, totalAmazonia = 0;
            var contador = 0;

            var url = "http://servicedatosabiertoscolombia.cloudapp.net/v1/Instituto_Nacional_de_Salud/indiceirca?$format=json";
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    $.each(data, function (i, field) {
                        var cant = field.length;
                        $.each(field, function (x, item) {

                            contador++;
                            if ($.inArray(omitirAcentos(field[x].departamento), regAndina) != -1) {
                                cantAndina++;
                                sumAndina += parseFloat(field[x].promedio_irca);
                            }
                            if ($.inArray(omitirAcentos(field[x].departamento), regCaribe) != -1) {
                                cantCaribe++;
                                sumaCaribe += parseFloat(field[x].promedio_irca);
                            }
                            if ($.inArray(omitirAcentos(field[x].departamento), regPacifica) != -1) {
                                cantPacifica++;
                                sumaPacifica += parseFloat(field[x].promedio_irca);
                            }
                            if ($.inArray(omitirAcentos(field[x].departamento), regOrinoquia) != -1) {
                                cantOrinoquia++;
                                sumaOrinoquia += parseFloat(field[x].promedio_irca);
                            }
                            if ($.inArray(omitirAcentos(field[x].departamento), regAmazonia) != -1) {
                                cantAmazonia++;
                                sumaAmazonia += parseFloat(field[x].promedio_irca);
                            }

                        });
                    });

                    $("#loaderGif").css("display", "none");

                    totalAndina = parseFloat(sumAndina).toFixed(2) / parseFloat(cantAndina).toFixed(2);
                    totalCaribe = parseFloat(sumaCaribe).toFixed(2) / parseFloat(cantCaribe).toFixed(2);
                    totalPacifica = parseFloat(sumaPacifica).toFixed(2) / parseFloat(cantPacifica).toFixed(2);
                    totalOrinoquia = parseFloat(sumaOrinoquia).toFixed(2) / parseFloat(cantOrinoquia).toFixed(2);
                    totalAmazonia = parseFloat(sumaAmazonia).toFixed(2) / parseFloat(cantAmazonia).toFixed(2);

                    $({ value: 0 }).animate({ value: totalAndina }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $(".dialAndina").knob();
                            $('.dialAndina').val(Math.ceil(this.value)).trigger('change');
                        }
                    })
                    //Asignar riesgo
                    $("#riesgoAndina").append(calcularRiesgo(totalAndina));

                    $({ value: 0 }).animate({ value: totalCaribe }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $(".dialCaribe").knob();
                            $('.dialCaribe').val(Math.ceil(this.value)).trigger('change');
                        }
                    })

                    //Asignar riesgo
                    $("#riesgoCaribe").append(calcularRiesgo(totalCaribe));


                    $({ value: 0 }).animate({ value: totalPacifica }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $(".dialPacifico").knob();
                            $('.dialPacifico').val(Math.ceil(this.value)).trigger('change');
                        }
                    })

                    //Asignar riesgo
                    $("#riesgoPacifico").append(calcularRiesgo(totalPacifica));


                    $({ value: 0 }).animate({ value: totalAmazonia }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $(".dialAmazonas").knob();
                            $('.dialAmazonas').val(Math.ceil(this.value)).trigger('change');
                        }
                    })

                    //Asignar riesgo
                    $("#riesgoAmazonia").append(calcularRiesgo(totalAmazonia));


                    $({ value: 0 }).animate({ value: totalOrinoquia }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function () {
                            $(".dialOrinoquia").knob();
                            $('.dialOrinoquia').val(Math.ceil(this.value)).trigger('change');

                        }
                    })

                    //Asignar riesgo
                    $("#riesgoOrinoquia").append(calcularRiesgo(totalOrinoquia));




                },
                error: function (x, y, z) {
                    console.log("Error retrieving ws");
                }
            });


        });

      
    </script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</body>
</html>
